<template>
  <div style="padding: 24px">
    <el-table :data="data" border>
      <el-table-column prop="no" label="ID" align="center" />
      <el-table-column prop="name" label="名称" align="center" />
      <el-table-column prop="formName" label="关联表单" align="center" />
      <el-table-column align="center" label="操作">
        <template slot-scope="{row}">
          <el-link :underline="false" type="primary" @click="relationsFormClick(row)">关联表单</el-link>
          <el-link :underline="false" type="primary" style="margin-left: 15px" :disabled="!row.formId" @click="startFlow(row)">启动流程</el-link>
        </template>
      </el-table-column>
    </el-table>

    <relationship-form
      v-if="isShowModal"
      :is-show.sync="isShowModal"
      :flow-i-d="currentFlow"
      :flow-name="currentFlowName"
      :relationship-form-i-d="currentRelationshipForm"
      @reloadList="getFlowList"
    />
    <start-flow-modal
      v-if="isShowStartFlowModal"
      :is-show.sync="isShowStartFlowModal"
      :flow-i-d="currentFlow"
      :flow-name="currentFlowName"
      :form-i-d="currentRelationshipForm"
    />
  </div>
</template>

<script>
import { GetFlowList } from '@/api/formManagement';
import RelationshipForm from './RelationshipFormModal';
import StartFlowModal from './StartFlowModal';
import EnumRouter from '@/constants/EnumRouter';
export default {
  name: 'FlowList',
  components: { RelationshipForm, StartFlowModal },
  data() {
    return {
      data: [],
      isShowModal: false,
      isShowStartFlowModal: false,
      currentFlow: '',
      currentFlowName: '',
      currentRelationshipForm: ''
    };
  },
  computed: {
    EnumRouter: () => EnumRouter
  },
  mounted() {
    this.getFlowList();
  },
  methods: {
    getFlowList() {
      GetFlowList().then(res => {
        this.data = res.data;
      }, err => {
        this.$message.error(err.message);
      });
    },
    /* 记录点击的流程信息*/
    recordClickItem(item) {
      this.currentFlow = item.no;
      this.currentFlowName = item.name;
      this.currentRelationshipForm = item.formId;
    },
    /* 关联表单*/
    relationsFormClick(item) {
      this.recordClickItem(item);
      this.isShowModal = true;
    },
    /* 启动流程*/
    startFlow(item) {
      this.recordClickItem(item);
      this.isShowStartFlowModal = true;
    }
  }
};
</script>

<style scoped>

</style>
